<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宿舍管理系统 - 维修申请</title>
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container">
        <h1>宿舍管理系统</h1>
        <div class="nav">
            <a href="/" class="nav-link">学生管理</a>
            <a href="/dormitory" class="nav-link">宿舍管理</a>
            <a href="/repair" class="nav-link active">维修申请</a>
            <button onclick="showAddForm()">提交维修申请</button>
        </div>

        <!-- 筛选器 -->
        <div class="filter-section">
            <select id="statusFilter" onchange="fetchRepairRequests()">
                <option value="">所有状态</option>
                <option value="待处理">待处理</option>
                <option value="处理中">处理中</option>
                <option value="已完成">已完成</option>
                <option value="已驳回">已驳回</option>
            </select>
            <input type="text" id="roomFilter" placeholder="输入宿舍号筛选" onchange="fetchRepairRequests()">
        </div>

        <!-- 维修申请列表 -->
        <div class="content">
            <h2>维修申请列表</h2>
            <table id="repairTable">
                <thead>
                    <tr>
                        <th>宿舍号</th>
                        <th>申请人</th>
                        <th>维修类型</th>
                        <th>问题描述</th>
                        <th>状态</th>
                        <th>申请时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="repairList">
                    <!-- 维修申请数据将通过JavaScript动态添加 -->
                </tbody>
            </table>
        </div>

        <!-- 添加维修申请表单 -->
        <div id="repairForm" class="modal" style="display: none;">
            <div class="modal-content">
                <h2 id="formTitle">提交维修申请</h2>
                <form id="addEditForm" onsubmit="handleSubmit(event)">
                    <div class="form-group">
                        <label for="roomNo">宿舍号:</label>
                        <input type="text" id="roomNo" required>
                    </div>
                    <div class="form-group">
                        <label for="studentID">学号:</label>
                        <input type="text" id="studentID" required>
                    </div>
                    <div class="form-group">
                        <label for="type">维修类型:</label>
                        <select id="type" required>
                            <option value="水电维修">水电维修</option>
                            <option value="家具维修">家具维修</option>
                            <option value="门窗维修">门窗维修</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="description">问题描述:</label>
                        <textarea id="description" required rows="4"></textarea>
                    </div>
                    <div class="form-buttons">
                        <button type="submit">提交</button>
                        <button type="button" onclick="hideForm()">取消</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 处理维修申请表单 -->
        <div id="processForm" class="modal" style="display: none;">
            <div class="modal-content">
                <h2>处理维修申请</h2>
                <form id="processRepairForm" onsubmit="handleProcessSubmit(event)">
                    <input type="hidden" id="processRequestId">
                    <div class="form-group">
                        <label for="processStatus">处理状态:</label>
                        <select id="processStatus" required>
                            <option value="处理中">处理中</option>
                            <option value="已完成">已完成</option>
                            <option value="已驳回">已驳回</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="processComment">处理意见:</label>
                        <textarea id="processComment" required rows="4"></textarea>
                    </div>
                    <div class="form-buttons">
                        <button type="submit">保存</button>
                        <button type="button" onclick="hideProcessForm()">取消</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 查看详情模态框 -->
        <div id="detailsModal" class="modal" style="display: none;">
            <div class="modal-content">
                <h2>维修申请详情</h2>
                <div id="repairDetails">
                    <!-- 维修申请详情将通过JavaScript动态添加 -->
                </div>
                <div class="form-buttons">
                    <button type="button" onclick="hideDetails()">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/js/repair.js"></script>
</body>
</html>